<template>
	<view>
		<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="150px">
			<div class="container">
				<h3 class="margin_b_20">动态主图<span style="color: red">*</span></h3>
				<el-form-item prop="imgs"><uni-file-picker v-model="formData.imgs" :limit="6" fileMediatype="image" returnType="array" :image-styles="imageStyle" @delete="imgDelete" /></el-form-item>

				<h3 class="margin_b_20">动态标题<span style="color: red">*</span></h3>
				<el-form-item prop="title"><el-input v-model.trim="formData.title" style="width: 500px" /></el-form-item>

				<h3 class="margin_b_20">动态内容<span style="color: red">*</span></h3>
				<el-form-item prop="content"><el-input v-model.trim="formData.content" style="width: 500px" type="textarea" :rows="5" /></el-form-item>
			</div>
		</el-form>

		<div class="btn">
			<el-button class="confirm_btn" @click="submitForm">确 定</el-button>
			<el-button @click="returnPage">返回列表</el-button>
		</div>
	</view>
</template>

<script>
import bus from '@/common/bus';
export default {
	data() {
		return {
			dataId: '',
			imageStyle: {
				height: '150px',
				width: '150px'
			},
			formData: {
				title: '',
				content: '',
				imgs: [],
			},
			rules: {
				title: [{
					required: true,
					message: '请输入动态标题',
					trigger: 'change'
				}],
				content: [{
					required: true,
					message: '请输入动态内容',
					trigger: 'change'
				}],
				imgs: [{
					required: true,
					validator: (rule, value, callback) => {
						if (this.formData.imgs.length == 0) {
							callback(new Error('请上传动态主图'));
						} else if (this.formData.imgs.length > 6) {
							callback(new Error('最多只能上传6张主图'));
						} else {
							callback();
						}
					},
					trigger: 'change'
				}],
			}
		};
	},
	created() {
		this.dataId = this.$route.query.id || '';
		this.loadData();
	},
	methods: {
		async loadData() {
			if (!this.dataId) {
				return;
			}
			
			let res = await this.$func.useadmin.call('dynamics/getDynamicsDetail', {
				id: this.dataId
			});
			
			this.formData = {
				...res.datas.data,
				imgs: res.datas.data.imgs.map((x) => {
					return {
						url: x
					};
				})
			}
		},
		submitForm() {
			const _this = this;
			this.$refs['ruleForm'].validate(async valid => {
				if (valid) {
					if (!this.dataId) {
						// 新增
						let res = await _this.$func.useadmin.call('dynamics/addDynamics', {
							...this.formData,
							imgs: this.formData.imgs.map((x) => x.url)
						});
						
						if (res.code == 200) {
							_this.$message.success('添加成功');
							_this.returnPage();
						}
					} else {
						// 编辑
						let res = await _this.$func.useadmin.call('dynamics/updateDynamics', {
							...this.formData,
							id: this.formData._id,
							imgs: this.formData.imgs.map((x) => x.url)
						});
						
						if (res.code == 200) {
							_this.$message.success('编辑成功');
							_this.returnPage();
						}
					}
				}
			});
		},
		imgDelete(e) {
			this.formData.imgs.splice(this.formData.imgs.findIndex((x) => x.url == e.url),1);
		},
		returnPage() {
			bus.$emit('tab-close');
			this.$router.push('/pages/dynamics/dynamics');
		}
	}
};
</script>
<style lang="scss">
.btn {
	background-color: #fff;
	padding-left: 170px;
	margin-top: -20px;
	border-radius: 10px;
	padding-bottom: 42px;
}
</style>
